<template>
    <div class="mj-version">
        <editor-title title="版本选择" tips="指定midjourney的渲染版本" required />

        <el-select
            v-if="mjVersion"
            v-model="currentVersion"
            placeholder="请选择版本"
            class="w-full mt-[8px]"
            size="large"
        >
            <el-option
                v-for="(item, key) in mjVersion[formData.model]"
                :key="key"
                :label="item"
                :value="item"
            />
        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import { config, formData } from '../../hooks/useDrawEffect'
import editorTitle from '../common/editor-title.vue'

interface MjVersionType {
    mj: string[];
    niji: string[];
}

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 模型版本
    modelValue: {
        type: String,
        default: ''
    }
})

const { modelValue: currentVersion } = useVModels(props, emits)

const mjVersion = computed<MjVersionType>(() => config.value?.mj_version as MjVersionType)

watch(
    () => [formData.value.model, config.value?.mj_version],
    ([v1, _v2]) => {
        if (!config.value?.mj_version) {
            return
        }

        if (v1 && currentVersion.value !== v1) {
            currentVersion.value = config.value?.mj_version[v1][0]
        }
    }
)
</script>
